<template>
  <div>
    <!-- v-if执行的优先级大于所有指令  --- v-if和v-for为什么不可以同时放一个标签上 -->
    <LunBoVue v-if="lunbo.data" :swiper="lunbo.data.images"></LunBoVue>
    <MenuSVue v-if="caidan.data" :menus="caidan.data.menus"></MenuSVue>
    <TuiJianVue
      v-if="tuijian.data"
      :recommend="tuijian.data.column_images[0]"
    ></TuiJianVue>
    <PinkFairVue
      v-if="jishi.data"
      :pinkfair="jishi.data.goods_list"
    ></PinkFairVue>
    <AwardSVue
      v-if="awards.data"
      :data="awards.data"
      :left="awards.data.vipTost.list"
      :right="awards.data.sign.dataList"
    ></AwardSVue>
    <EveryDay
      v-if="fengqiang.data"
      :day_left="fengqiang.data"
      :day_goods="fengqiang.data.goods"
    ></EveryDay>
    <YouLikeVue v-if="youlike.data" :likes="youlike.data.list"></YouLikeVue>
  </div>
</template>

<script>
import jsonp from "jsonp";
import LunBoVue from "../components/LunBo.vue";
import MenuSVue from "../components/MenuS.vue";
import TuiJianVue from "../components/TuiJian.vue";
import PinkFairVue from "../components/PinkFair.vue";
import AwardSVue from "../components/AwardS.vue";
import EveryDay from "../components/EveryDay.vue";
import YouLikeVue from "../components/YouLike.vue";
export default {
  components: {
    LunBoVue,
    MenuSVue,
    TuiJianVue,
    PinkFairVue,
    AwardSVue,
    EveryDay,
    YouLikeVue,
  },
  data() {
    return {
      lunbo: {
        // data:{
        //   images:[]
        // }
      },
      caidan: {},
      xiao_lunbo: {},
      tuijian: {},
      jishi: {},
      awards: {},
      fengqiang: {},
      aaaa: {},
      bbbb: {},
      youlike: {},
    };
  },
  methods: {
    getData() {
      let url =
        "https://mall.api.epet.com/v3/index/home.html?pet_type=dog&version=596&is_single=0&isWeb=1&system=wap&distinct_id=18f04a7a7a0b99-08a1894e4f5d0f-4c657b58-921600-18f04a7a7a1522&debug_param=";
      //jsonp插件只能用于get请求方式
      jsonp(url, {}, (err, data) => {
        if (err) {
          //请求失败
          alert("跨域请求失败");
        } else {
          let data_ = data.datas.list;
          //把第一次请求到的数据存入本地，以后就从本地获取，不再请求接口了
          localStorage.setItem("home", JSON.stringify(data_));
          this.format(data_);
        }
      });
    },
    format(data) {
      let [
        lunbo,
        caidan,
        xiao_lunbo,
        tuijian,
        jishi,
        awards,
        fengqiang,
        aaaa,
        bbbb,
        youlike,
      ] = data;
      this.lunbo = lunbo;
      this.caidan = caidan;
      this.xiao_lunbo = xiao_lunbo;
      this.tuijian = tuijian;
      this.jishi = jishi;
      this.awards = awards;
      this.fengqiang = fengqiang;
      this.aaaa = aaaa;
      this.bbbb = bbbb;

      this.youlike = youlike;
    },
  },
  mounted() {
    //先读取本地存储，如果有就直接读本地的，没有再去走接口
    let data = localStorage.getItem("home");
    if (data) {
      this.format(JSON.parse(data));
    } else {
      this.getData();
    }
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
</style>